<template>
	<div class="imgList">
		<ul>
			<li v-for="(value,index) in imgLists" :style="{backgroundImage: buildBackground(value)}">	
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
    data() {
      return {
        activeIndex: '1',
        imgLists:[
        	{"image":"//anotheresc.webfactional.com/images/Vol-6/Mapping-the-Mountains/_fullScreen/AE_MappingtheMountain_RStumpf4.jpg"},
        	{"image":"//anotheresc.webfactional.com/images/Vol-3/Response/_fullScreen/MARX_AE-02.jpg"},
        	{"image":"//anotheresc.webfactional.com/images/Vol-6/Mapping-the-Mountains/_fullScreen/AE_MappingtheMountain_RStumpf4.jpg"},
        	{"image":"//anotheresc.webfactional.com/images/Vol-6/Mapping-the-Mountains/_fullScreen/AE_MappingtheMountain_RStumpf4.jpg"},
        
        ]
        	
        }

    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
       buildBackground (item) {
      return `url(${item.image})`
    }
    }
  }
</script>

<style scoped="scoped">
	.imgList{width: 100%;height: 100%; overflow: hidden;margin: 0;}
	.imgList ul{list-style: none;height: 100%; width: 100%;margin: 0;padding: 0;}
	.imgList ul li{width: 100%;height: 25%; background-size:100% 100%;}
	
	
	@media screen and (max-width: 1024px) {	
	.imgList ul li{width: 100%;height: 25%;background-size: auto; background-position:50% 0%;}
	}
	
</style>